<template>
  <div style="background-color: #ffffff;">
    <!-- :before-change="beforeChange" -->
    <HeadNav :title="'今日填报'"></HeadNav>
    <div class="content">
      <!-- <van-tabs
        class="contentTabs"
        v-model="active"
        line-width="18"
        line-height="4"
        :swipeable="true"
        sticky
        :offset-top="'44px'"
        isFixed="true"
      >
        <van-tab
          v-for="(item,index) in tabData"
          :title="item.typeName"
          :key="index"
        >
          <div class="contentText">
            <van-list
              v-model="loading"
              :finished="finished"
              :offset="offset"
              :finished-text="finishedText"
              @load="onLoad"
            >
              <template v-if="contentData.length>0">
                <div
                  v-for="(item2, index2) in contentData"
                  class="container"
                  :key="index2"
                  @click="handleDetails(item2)"
                >
                  <div class="box">
                    <span class="title1">
                      {{ item2.certifiedObject }}申请认证{{
                        item2.applyContent
                      }}
                    </span>
                    <span class="title2 tittle2-first">
                      认证对象:{{ item2.certifiedObject }}
                    </span>
                    <p class="title2 clearfix">
                      <span class="fl">申请时间:{{ item2.applyTime }}</span>
                      <span class="fr">{{ item2.organizationName }}</span>
                    </p>
                  </div>
                </div>
              </template>
<template v-else>
                <div class="emptyContainer"></div>
              </template>
</van-list>
</div>
</van-tab>
</van-tabs> -->
      <div class="contentTop">
        <div class="contentTop-left">
          <img src="../../assets/images/dangkou.png" alt="" style="width: 34px; height: 34px;">
        </div>
        <div class="contentTop-right">
          <div class="contentTop-right-top">运中食堂第一档口</div>
          <div class="contentTop-right-bottom">2025-01-26 提交清单</div>
        </div>
      </div>
      <template v-if="!isSubmit">
        <div class="contentMiddle"></div>
        <div class="contentBottom">
          <div style="margin-left: 24px; margin-right: 24px; width:calc(100% - 48px);">
            <van-button type="primary" class="loginBtn" @click="toCheck()">去填报 </van-button>
          </div>
          <div class="tips">今日不填报</div>
        </div>
      </template>
      <template v-else>
        <div class="contentBottom-data">
          <div class="detailItem" v-for="(item, index) in detailsBox.detailList" :key="index">
            <div class="name">{{ item.name }}</div>
            <div class="bottom">
              <div class="price"> ￥{{ item.price }}</div>
              <div class="num">{{ item.num }} 件</div>
              <div class="allPrice">￥{{ item.allPrice }} </div>
            </div>
          </div>
        </div>
        <div class="sumBox">
          <div class="sumNum">共{{ detailsBox.sumNum }}项</div>
          <div class="text">合计</div>
          <div class="sumPrice">￥{{ detailsBox.sumPrice }}</div>
        </div>
        <div style="margin-left: 24px; margin-right: 24px;padding-bottom: 30px; width:calc(100% - 48px);">
          <van-button type="primary" class="loginBtn" @click="toCheck()">重新填报 </van-button>
        </div>
      </template>
    </div>
    <foot></foot>
  </div>
</template>

<script>
/* eslint-disable */
// import { getApplyCertificationPagePho, getVerifyTypeList } from '@/api/api'
import { getParams } from '@/common/public'
import HeadNav from '@/components/HeadNav'
import foot from '../foot/foot.vue'
import moment from 'moment'
import { mapState } from 'vuex'
export default {
  name: 'SIndex',
  components: {
    HeadNav,
    foot
  },
  computed: {
    ...mapState({
      token: (state) => state.applyrecords.token
    })
  },
  watch: {
    active(newVal) {
      console.log('newVal', newVal)
      if (newVal === 0) {
        this.params.applyType = null
        this.loading = true
        this.contentData = []
        this.finished = false
        if (!this.finished) {
          this.onLoad(1)
        }
      } else {
        this.params.applyType = newVal
        this.loading = true
        this.contentData = []
        this.finished = false
        if (!this.finished) {
          this.onLoad(1)
        }
      }
    }
  },
  data() {
    return {
      active: 0,
      // tabData: [
      //   {
      //     typeId: 0,
      //     typeName: '全部'
      //   },
      //   {
      //     typeId: 1,
      //     typeName: '转校'
      //   },
      //   {
      //     typeId: 2,
      //     typeName: '职务认证'
      //   },
      //   {
      //     typeId: 3,
      //     typeName: '学历认证'
      //   },
      //   {
      //     typeId: 4,
      //     typeName: '职称认证'
      //   },
      //   {
      //     typeId: 5,
      //     typeName: '空间认证'
      //   }
      // ],
      //  tabDatasss: [
      //   {
      //     typeId: 0,
      //     typeName: '全部'
      //   }],
      // contentData: [],
      // applyRecords: {},
      // finishedText: '没有更多了',
      // loading: false,
      // finished: false,
      // offset: 0, // 滚动条与底部距离小于 offset 时触发load事件，默认300
      // pageNo: 1, // 当前页码
      // pageSize: 10, // 分页大小
      // total: 0, // 查询总条数

      // params: {
      //   pageNo: 1,
      //   pageSize: 10,
      //   applyType: undefined,
      //   applyStatus: 0,
      //   access_token: sessionStorage.getItem('Authorization'),
      //   tenantId: '002'
      // },
      // paramsStatus: {
      //   access_token: sessionStorage.getItem('Authorization'),
      //   tenantId: '002'
      // }
      detailsBox: {
        detailList: [
          {
            id: 1,
            name: '新东大鸡排  (件/20公斤)',
            price: '170',
            num: 2,
            allPrice: '340'
          },
          {
            id: 1,
            name: '鱼丸\虾丸（件/10公斤）',
            price: '115.00',
            num: 1,
            allPrice: '115'
          },
          {
            id: 1,
            name: '奥尔良腌料（袋/2斤）',
            price: '80',
            num: 2,
            allPrice: '160'
          },
          {
            id: 1,
            name: '螺蛳粉专用辣椒（袋/50斤）',
            price: '30',
            num: 3,
            allPrice: '90'
          },
          {
            id: 1,
            name: '鸡油（袋/2斤）',
            price: '18',
            num: 5,
            allPrice: '90'
          }
        ],
        sumPrice: '795',
        sumNum: '5'
      },
      isSubmit: false,
      params: {

      }
    }
  },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      if(to.query.item!==undefined){
        vm.localData = JSON.parse(to.query.item)
        console.log(vm.isSubmit, 'ppppppppppuiuuuuu')
        vm.isSubmit = vm.localData.isSubmit
        console.log(vm.isSubmit)
      }else{
        vm.isSubmit=false
      }
     
    })
  },
  mounted() {
   
  },
  created() {
    
  },
  methods: {
   
    toCheck() {
      this.$router.push({ path: '/selectFillIn' })
    }
  },
  
  beforeDestroy() {
    console.log('index')
    window.removeEventListener('scroll', this.onLoad, true)
  }
}
</script>

<style lang="less" scoped>
span,
p {
  padding: 0;
  margin: 0;
}

/deep/.van-tab {
  z-index: 200;
  height: 44px;
  //  background:rgb(216, 143, 143);
}

/deep/.van-tabs__wrap .van-tabs__wrap--scrollable {
  position: fixed;
}

/deep/.van-tab--active {
  /* color: rgb(255, 152, 82); */
}

/deep/.van-tabs__line {
  height: 0.6vw;
  background-color: rgb(255, 152, 82);
}

.content {
  overflow: hidden;
  margin-bottom: 10px;
  padding-bottom: 50px;
}

.contentTop {
  background-color: white;
  padding: 25px 24px;
  margin-top: 42px;
  display: flex;
  align-items: center;

  .contentTop-left {
    width: 54px;
    height: 54px;
    border-radius: 54px;
    background: #f9f9f9;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .contentTop-right {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    margin-left: 16px;
  }

  .contentTop-right-top {
    font-size: 18px;
    text-align: left;
    color: #000000;
    line-height: 18px;
  }

  .contentTop-right-bottom {
    font-size: 16px;
    line-height: 16px;
    text-align: left;
    color: #000000;
    margin-top: 12px;
  }
}

.contentMiddle {
  background-color: #f9f9f9;
  height: 15px;
}

.contentBottom {
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  align-items: center;
  padding-top: 228px;
  padding-bottom: 228px;
}

.contentBottom-data {
  background-color: #f9f9f9;
  padding-top: 15px;
  padding-bottom: 15px;

  .detailItem {
    background-color: #ffffff;
    padding: 12px 24px;
    margin-bottom: 5px;

    .name {
      font-size: 16px;
      color: #000000;
    }

    .bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 18px;

      .price,
      .num {
        color: #999999;
        font-size: 15px;
      }

      .allPrice {
        font-size: 15px;
        color: #000000;
      }
    }
  }

  .detailItem:last-child {
    margin-bottom: 0px;
  }


}

.sumBox {
  display: flex;
  align-items: center;
  margin-top: 20px;
  padding-left: 24px;
  padding-bottom: 30px;

  .sumNum {
    font-size: 12px;
    color: #999999;
  }

  .text {
    color: #047DCB;
    font-size: 12px;
  }

  .sumPrice {
    font-size: 18px;
    color: #000000;
    margin-left: 8px;
    margin-right: 8px;
  }
}

/*清浮动*/
.clearfix:after {
  content: '';
  display: block;
  clear: both;
}

.clearfix {
  zoom: 1;
}

.fl {
  // width: 180px;
  color: #666666;
  float: left;
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
}

.fr {
  float: right;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgb(153, 153, 153, 0.5);
  font-size: 13px;
}

/deep/.van-tabs__wrap {
  touch-action: manipulation;
  border-top: none;
}

/deep/.van-tab {
  border-top: none;
  border-bottom: 1px solid rgba(245, 244, 249, 1);
}

.emptyContainer {
  // background: red;
  height: 50px;

  /deep/.van-list__finished-text {
    height: 400px;
    background: palegreen;
  }
}

// 去逛逛
.loginBtn {
  width: 100%;
  height: 45px;
  border: none;
  background: #047DCB;
  border-radius: 45px;
}

.tips {
  margin-top: 25px;
  font-size: 14px;
  text-align: right;
  color: #000000;
  line-height: 14px;
}
</style>
